<template>
    <section id="case-add-page">
        <sub-title subname="术后镇痛病例征集表（必填）"></sub-title>
        <main class="des">
            <p>目的：使用方法：PCA（病人自控镇痛），在连续输注一定药物的基础上，疼痛时患者或者家属按压PCA控制按钮，给予一次单次剂量以止痛。</p>
        </main>
        <section class="base-msg">
            <article class="wrap-box wui-border-tb case-msg">
                <w-field name="WriteTime" type="date" v-model="WriteTime" label-width="60" icon-width="100" height="40" placeholder="日期"
                    class="inp-row">
                    <w-row slot="label">
                        <w-cell>
                            <i class='case-date-icon'></i>
                        </w-cell>
                        <span style="color:#bababa;font-size:14px;">日期</span>
                    </w-row>
                </w-field>
            </article>
            <article class="wrap-box wui-border-tb case-msg">
                <w-field name="ZyNo" v-model="ZyNo" label-width="30" icon-width="100" height="40" placeholder="住院号" class="inp-row">
                    <w-row slot="label">
                        <w-cell>
                            <i class='case-no-icon'></i>
                        </w-cell>
                    </w-row>
                </w-field>
            </article>
            <article class="wrap-box wui-border-tb case-msg">
                <w-field name="DepNo" v-model="DepNo" label-width="30" icon-width="100" height="40" placeholder="科室" class="inp-row">
                    <w-row slot="label">
                        <w-cell>
                            <i class='case-dep-icon'></i>
                        </w-cell>
                    </w-row>
                </w-field>
            </article>
            <article class="wrap-box wui-border-tb case-msg">
                <w-field name="CNo" v-model="CNo" label-width="30" icon-width="100" height="40" placeholder="床号" class="inp-row">
                    <w-row slot="label">
                        <w-cell>
                            <i class='case-bedno-icon'></i>
                        </w-cell>
                    </w-row>
                </w-field>
            </article>
            <!--<article class="wrap-box wui-border-tb case-msg">
                <w-field name="Name" v-model="Name" label-width="30" icon-width="100" height="40" placeholder="姓名" class="inp-row">
                    <w-row slot="label">
                        <w-cell>
                            <i class='case-name-icon'></i>
                        </w-cell>
                    </w-row>
                </w-field>
            </article>-->
            <article class="wrap-box wui-border-tb case-msg">
                <w-field name="Sex" v-model="Sex" label-width="30" icon-width="100" height="40" placeholder="性别" class="inp-row">
                    <w-row slot="label">
                        <w-cell>
                            <i class='case-sex-icon'></i>
                        </w-cell>
                    </w-row>
                </w-field>
            </article>
            <article class="wrap-box wui-border-tb case-msg">
                <w-field name="Age" v-model="Age" label-width="30" icon-width="100" height="40" placeholder="年龄" class="inp-row">
                    <w-row slot="label">
                        <w-cell>
                            <i class='case-age-icon'></i>
                        </w-cell>
                    </w-row>
                </w-field>
            </article>
            <article class="wrap-box wui-border-tb case-msg">
                <w-field name="Weight" v-model="Weight" label-width="30" icon-width="100" height="40" placeholder="体重" class="inp-row">
                    <w-row slot="label">
                        <w-cell>
                            <i class='case-weight-icon'></i>
                        </w-cell>
                    </w-row>
                </w-field>
            </article>
        </section>
        <h2 style="color: #005ba8;font-weight: bold;padding-left: 1rem;">药物配方（必填）</h2>
        <section class="med-msg">
            <w-row class="th">
                <w-cell>PCA配泵</w-cell>
                <w-cell>布托啡诺</w-cell>
                <w-cell>右美托咪啶</w-cell>
            </w-row>
            <w-row class="tr">
                <w-cell class="time">PCA背景输注</w-cell>
                <w-cell class="med-yl">
                    <input name="MedCF_BTFN_1" v-model="MedCF_BTFN_1" />
                </w-cell>
                <w-cell class="med-yl">
                    <input name="MedCF_YMTMD_1" v-model="MedCF_YMTMD_1" />
                </w-cell>
            </w-row>
            <w-row class="tr">
                <w-cell class="time">单次剂量</w-cell>
                <w-cell class="med-yl">
                    <input name="MedCF_BTFN_2" v-model="MedCF_BTFN_2" />
                </w-cell>
                <w-cell class="med-yl">
                    <input name="MedCF_YMTMD_2" v-model="MedCF_YMTMD_2" />
                </w-cell>
            </w-row>
            <w-row class="tr">
                <w-cell class="time">锁定时间</w-cell>
                <w-cell class="med-yl">
                    <input name="MedCF_BTFN_3" v-model="MedCF_BTFN_3" />
                </w-cell>
                <w-cell class="med-yl">
                    <input name="MedCF_YMTMD_3" v-model="MedCF_YMTMD_3" />
                </w-cell>
            </w-row>
            <w-row class="tr">
                <w-cell class="time">术后镇痛总时长</w-cell>
                <w-cell class="med-yl">
                    <input name="MedCF_BTFN_4" v-model="MedCF_BTFN_4" />
                </w-cell>
                <w-cell class="med-yl">
                    <input name="MedCF_YMTMD_4" v-model="MedCF_YMTMD_4" />
                </w-cell>
            </w-row>
        </section>
        <h2 style="color: #005ba8;font-weight: bold;padding-left: 1rem;">其他配伍药物（必填）</h2>
        <section class="med-msg">
            <w-row class="th">
                <w-cell>药品名称</w-cell>
                <w-cell>商品名</w-cell>
                <w-cell>规格</w-cell>
                <w-cell>数量</w-cell>
            </w-row>
            <w-row class="tr">
                <w-cell class="med-yl">
                    <input name="Med_PW_1_1" v-model="Med_PW_1_1" />
                </w-cell>
                <w-cell class="med-yl">
                    <input name="Med_PW_1_2" v-model="Med_PW_1_2" />
                </w-cell>
                <w-cell class="med-yl">
                    <input name="Med_PW_1_3" v-model="Med_PW_1_3" />
                </w-cell>
                <w-cell class="med-yl">
                    <input name="Med_PW_1_4" v-model="Med_PW_1_4" />
                </w-cell>
            </w-row>
            <w-row class="tr">
                <w-cell class="med-yl">
                    <input name="Med_PW_2_1" v-model="Med_PW_2_1" />
                </w-cell>
                <w-cell class="med-yl">
                    <input name="Med_PW_2_2" v-model="Med_PW_2_2" />
                </w-cell>
                <w-cell class="med-yl">
                    <input name="Med_PW_2_3" v-model="Med_PW_2_3" />
                </w-cell>
                <w-cell class="med-yl">
                    <input name="Med_PW_2_4" v-model="Med_PW_2_4" />
                </w-cell>
            </w-row>
            <w-row class="tr">
                <w-cell class="med-yl">
                    <input name="Med_PW_3_1" v-model="Med_PW_3_1" />
                </w-cell>
                <w-cell class="med-yl">
                    <input name="Med_PW_3_2" v-model="Med_PW_3_2" />
                </w-cell>
                <w-cell class="med-yl">
                    <input name="Med_PW_3_3" v-model="Med_PW_3_3" />
                </w-cell>
                <w-cell class="med-yl">
                    <input name="Med_PW_3_4" v-model="Med_PW_3_4" />
                </w-cell>
            </w-row>
            <w-row class="tr">
                <w-cell class="med-yl">
                    <input name="Med_PW_4_1" v-model="Med_PW_4_1" />
                </w-cell>
                <w-cell class="med-yl">
                    <input name="Med_PW_4_2" v-model="Med_PW_4_2" />
                </w-cell>
                <w-cell class="med-yl">
                    <input name="Med_PW_4_3" v-model="Med_PW_4_3" />
                </w-cell>
                <w-cell class="med-yl">
                    <input name="Med_PW_4_4" v-model="Med_PW_4_4" />
                </w-cell>
            </w-row>
        </section>

        <article class="wrap-box wui-border-tb case-msg">
            <w-field name="Med_GZ" v-model="Med_GZ" label-width="30" icon-width="100" type="textarea" rows="4" placeholder="转归情况：病人静息/运动疼痛评分、是否有不不良反应(恶心、瞻望、头晕等)、PCIA次数、恢复时长等。"
                class="inp-row">
                <w-row slot="label">
                    <w-cell>
                        <i class='case-hos-icon'></i>
                    </w-cell>
                </w-row>
            </w-field>
        </article>
        <article class="wrap-box wui-border-tb case-msg">
            <p class="tips">要求：氧流量>2, 监护议呼末浓度>1.3MAC(挥发罐刻度>3)</p>
            <w-field label-width="30" height="50" :show-icon="true" class="inp-row">
                <w-row slot="label">
                    <w-cell width="24">
                        <i class='case-img-icon'></i>
                    </w-cell>
                </w-row>
                <div slot="content" class="sub-title" style="width: 90%;">
                    <a href="javascript:;" class="file" @click="uploadFile">选择影像文件</a>
                </div>
            </w-field>
        </article>
        <article class="wrap-box wui-border-tb case-msg">
            <w-row class="imgview" style="flex-wrap: wrap; justify-content: space-around;">
                <w-cell v-if="pviewShow1 == 1" @click="showBig(pview1)">
                    <img :src="pview1" />
                </w-cell>
                <w-cell v-if="pviewShow2 == 1" @click="showBig(pview2)">
                    <img :src="pview2" />
                </w-cell>
                <w-cell v-if="pviewShow3 == 1" @click="showBig(pview3)">
                    <img :src="pview3" />
                </w-cell>
            </w-row>
        </article>
        <br />
        <br />

        <article class="padding-submit case-msg" style="padding: 1rem 0 6rem 0;">
            <w-button size="large" type="primary" :plain="plain" :bgColor="bgColor" fontColor="#ffffff" :block="isBlock" borderColor="borderColor"
                @click="addCaseAfter()">提 交</w-button>
        </article>
        <w-popup v-model="popupPre" position="bottom" class="select-popup">
            <w-row class="select-popup-head">
                <w-cell class="title">
                    <span style="margin-left: 10px;">影像预览</span>
                </w-cell>
                <w-cell class="btn">
                    <label style="display: inline-block;width: 100%;text-align: right;">
                        <img src="../../assets/img/close.png" @click="closePopUp()" />
                    </label>
                </w-cell>
            </w-row>
            <w-row>
                <div style="background-color:#fff;text-align:center;">
                    <img :src="preimg" style="width: 95%;" />
                </div>
            </w-row>
        </w-popup>
    </section>
</template>

<script>
    import {
        mapGetters,
        mapActions
    } from 'vuex';
    import subTitle from '../../components/subTitle';
    import axios from '../../fetch/axios';


    export default {
        name: 'caseAdd',
        props: {

        },
        data() {
            return {
                isBlock: true,
                bgColor: "#005ba8",
                plain: false,
                datePlaceHolder: '日期',
                preimg: '',
                popupPre: false,

                WriteTime: '',
                ZyNo: '',
                DepNo: '',
                CNo: '',
                Name: '',
                Sex: '',
                Age: '',
                Weight: '',

                MedCF_BTFN_1: '',
                MedCF_BTFN_2: '',
                MedCF_BTFN_3: '',
                MedCF_BTFN_4: '',
                MedCF_YMTMD_1: '',
                MedCF_YMTMD_2: '',
                MedCF_YMTMD_3: '',
                MedCF_YMTMD_4: '',

                Med_PW_1_1: '',
                Med_PW_1_2: '',
                Med_PW_1_3: '',
                Med_PW_1_4: '',

                Med_PW_2_1: '',
                Med_PW_2_2: '',
                Med_PW_2_3: '',
                Med_PW_2_4: '',

                Med_PW_3_1: '',
                Med_PW_3_2: '',
                Med_PW_3_3: '',
                Med_PW_3_4: '',

                Med_PW_4_1: '',
                Med_PW_4_2: '',
                Med_PW_4_3: '',
                Med_PW_4_4: '',

                Med_GZ: '',
                CaseImg: '',

                pview1: '',
                pview2: '',
                pview3: '',
                pviewShow1: 0,
                pviewShow2: 0,
                pviewShow3: 0,
                currentIndex: 0,
            }
        },
        components: {
            subTitle
        },
        methods: {
            ...mapActions([
                'saveCaseAfter',
                'setLoading'
            ]),
            addCaseAfter: function () {
                if (this.WriteTime.replace(/\s+$|^\s+/g, "") == '') {
                    Wui.Toast.show('请输入日期', 'middle');
                    return false;
                }
                if (this.ZyNo.replace(/\s+$|^\s+/g, "") == '') {
                    Wui.Toast.show('请输入住院号', 'middle');
                    return false;
                }
                if (this.DepNo.replace(/\s+$|^\s+/g, "") == '') {
                    Wui.Toast.show('请输入科室', 'middle');
                    return false;
                }
                if (this.CNo.replace(/\s+$|^\s+/g, "") == '') {
                    Wui.Toast.show('请输入床号', 'middle');
                    return false;
                }
                // if (this.Name.replace(/\s+$|^\s+/g, "") == '') {
                //     Wui.Toast.show('请输入姓名', 'middle');
                //     return false;
                // }
                if (this.Sex.replace(/\s+$|^\s+/g, "") == '') {
                    Wui.Toast.show('请输入性别', 'middle');
                    return false;
                }
                if (this.Age.replace(/\s+$|^\s+/g, "") == '') {
                    Wui.Toast.show('请输入年龄', 'middle');
                    return false;
                }
                if (this.Weight.replace(/\s+$|^\s+/g, "") == '') {
                    Wui.Toast.show('请输入体重', 'middle');
                    return false;
                }

                if (this.MedCF_BTFN_1.replace(/\s+$|^\s+/g, "") == '') {
                    Wui.Toast.show('请输入药物配方', 'middle');
                    return false;
                }
                if (this.MedCF_BTFN_2.replace(/\s+$|^\s+/g, "") == '') {
                    Wui.Toast.show('请输入药物配方', 'middle');
                    return false;
                }
                if (this.MedCF_BTFN_3.replace(/\s+$|^\s+/g, "") == '') {
                    Wui.Toast.show('请输入药物配方', 'middle');
                    return false;
                }
                if (this.MedCF_BTFN_4.replace(/\s+$|^\s+/g, "") == '') {
                    Wui.Toast.show('请输入药物配方', 'middle');
                    return false;
                }


                if (this.Med_PW_1_1.replace(/\s+$|^\s+/g, "") == '') {
                    Wui.Toast.show('请输入其他配伍药物', 'middle');
                    return false;
                }
                if (this.Med_PW_1_2.replace(/\s+$|^\s+/g, "") == '') {
                    Wui.Toast.show('请输入其他配伍药物', 'middle');
                    return false;
                }
                if (this.Med_PW_1_3.replace(/\s+$|^\s+/g, "") == '') {
                    Wui.Toast.show('请输入其他配伍药物', 'middle');
                    return false;
                }
                if (this.Med_PW_1_4.replace(/\s+$|^\s+/g, "") == '') {
                    Wui.Toast.show('请输入其他配伍药物', 'middle');
                    return false;
                }

                if (this.pview1 == "" && this.pview2 == "" && this.pview3 == "") {
                    Wui.Toast.show('请上传影像文件', 'middle');
                    return false;
                }
                if (this.CaseImg == "") {
                    Wui.Toast.show('请上传影像文件', 'middle');
                    return false;
                }

                let _MedCF_BTFN = this.MedCF_BTFN_1 + "&" + this.MedCF_BTFN_2 + "&" + this.MedCF_BTFN_3 + "&" +
                    this.MedCF_BTFN_4;
                let _MedCF_YMTMD = this.MedCF_YMTMD_1 + "&" + this.MedCF_YMTMD_2 + "&" + this.MedCF_YMTMD_3 + "&" +
                    this.MedCF_YMTMD_4;

                let _Med_PW_1 = this.Med_PW_1_1 + "&" + this.Med_PW_1_2 + "&" + this.Med_PW_1_3 + "&" + this.Med_PW_1_4;
                let _Med_PW_2 = this.Med_PW_2_1 + "&" + this.Med_PW_2_2 + "&" + this.Med_PW_2_3 + "&" + this.Med_PW_2_4;
                let _Med_PW_3 = this.Med_PW_3_1 + "&" + this.Med_PW_3_2 + "&" + this.Med_PW_3_3 + "&" + this.Med_PW_3_4;
                let _Med_PW_4 = this.Med_PW_4_1 + "&" + this.Med_PW_4_2 + "&" + this.Med_PW_4_3 + "&" + this.Med_PW_4_4;


                let params = {
                    Type: 1,
                    WriteTime: this.WriteTime,
                    ZyNo: this.ZyNo,
                    DepNo: this.DepNo,
                    CNo: this.CNo,
                    Name: this.Name,
                    Sex: this.Sex,
                    Age: this.Age,
                    Weight: this.Weight,
                    MedCF_BTFN: _MedCF_BTFN,
                    MedCF_YMTMD: _MedCF_YMTMD,
                    Med_PW_1: _Med_PW_1,
                    Med_PW_2: _Med_PW_2,
                    Med_PW_3: _Med_PW_3,
                    Med_PW_4: _Med_PW_4,
                    Med_GZ: this.Med_GZ,
                    CaseImg: this.CaseImg,
                    OpenID: localStorage.openID
                }

                this.setLoading(true);
                this.saveCaseAfter(params).then((res) => {
                    this.setLoading(false);
                    window.Wui.Toast.show('提交成功', 'middle');
                    setTimeout(function () {
                        location.reload()
                    }, 3000);
                });
            },
            uploadFile: function (event) {
                let me = this;
                me.$wx.wxmultiupload(function (res) {
                    if (res.length > 0) {
                        me.wxdownloadfile(res, '.jpg', 'caseimgs');
                    } else {
                        alert("微信上传失败！！");
                    }
                });
            },
            //从腾讯下载到本地
            wxdownloadfile: function (serverIds, filetype, where) {
                let self = this;
                let params = {
                    serverIds: serverIds,
                    urlWhere: where,
                    filetype: filetype
                };
                self.$http("/wxsdk/wechatdownloadimg", params, function (res) {
                    if (res.Result == "success") {
                        let imgs = res.imgs;
                        for (let i = 0, l = imgs.length; i < l; i++) {
                            if (i == 0) {
                                self.pview1 = imgs[i];
                                self.pviewShow1 = 1;
                            } else if (i == 1) {
                                self.pview2 = imgs[i];
                                self.pviewShow2 = 1;
                            } else if (i == 2) {
                                self.pview3 = imgs[i];
                                self.pviewShow3 = 1;
                            }
                        }
                        self.CaseImg = self.pview1 + "$" + self.pview2 + "$" + self.pview3
                    } else {
                        alert(res.msg);
                    }
                });
            },
            showBig: function (src) {
                this.popupPre = true;
                this.preimg = src;
            },
            closePopUp: function () {
                this.popupPre = false;
            },
        }
    }
</script>

<style lang="scss" scoped>
    #case-add-page {
        font-size: 0.5rem !important;
        i {
            width: 20px;
            height: 20px;
        }
        .case-date-icon {
            background: url('../../assets/img/case/date.png') center no-repeat;
            background-size: 100% auto;
        }
        .case-no-icon {
            background: url('../../assets/img/case/no.png') center no-repeat;
            background-size: 100% auto;
        }
        .case-dep-icon {
            background: url('../../assets/img/case/dep.png') center no-repeat;
            background-size: 100% auto;
        }
        .case-bedno-icon {
            background: url('../../assets/img/case/bedno.png') center no-repeat;
            background-size: 100% auto;
        }
        .case-img-icon {
            background: url('../../assets/img/case/city.png') center no-repeat;
            background-size: 100% auto;
        }
        .case-name-icon {
            background: url('../../assets/img/case/name.png') center no-repeat;
            background-size: 100% auto;
        }
        .case-sex-icon {
            background: url('../../assets/img/case/sex.png') center no-repeat;
            background-size: 100% auto;
        }
        .case-age-icon {
            background: url('../../assets/img/case/age.png') center no-repeat;
            background-size: 100% auto;
        }
        .case-weight-icon {
            background: url('../../assets/img/case/weight.png') center no-repeat;
            background-size: 100% auto;
        }
        .case-hos-icon {
            background: url('../../assets/img/case/hos.png') center no-repeat;
            background-size: 100% auto;
        }
        .case-active-icon {
            background: url('../../assets/img/case/active.png') center no-repeat;
            background-size: 100% auto;
        }
        .case-msg {
            width: 90%;
            margin: 0 auto;
            padding: 0.3rem 0;
        }
        .des {
            width: 93%;
            color: #dddddd;
            margin: 0 auto;
            line-height: 0.9rem;
            margin-top: 0.5rem;
        }
        .case-msg {
            width: 90%;
            margin: 0 auto;
            padding: 0.3rem 0;
        }
        .med-msg,
        .commed-msg {
            width: 90%;
            margin: 0 auto;
            .wui-al-lm {
                justify-content: center !important;
            }
            .th {
                background: #005ba8;
                color: #fff;
                height: 1.5rem;
                div {
                    border-right: 1px solid #fff;
                }
            }
            .tr {
                height: 1.8rem;
                .time {
                    border-bottom: 1px solid #f2f2f2;
                }
                div {
                    border-right: 1px solid #f2f2f2;
                    border-bottom: 1px solid #f2f2f2;
                }
            }
        }
        .med-yl {
            input {
                width: 100%; //    height: 80%;
                border: 0;
            }
        }
        .wui-field .wui-field-content .wui-field-input {
            height: 40px;
        }
        .file {
            position: relative;
            display: inline-block; // background: #D0EEFF;
            // border: 1px solid #99D3F5;
            // border-radius: 4px;
            padding: 4px 6px;
            overflow: hidden;
            color: #b2b2b2;
            text-decoration: none;
            text-indent: 0;
            line-height: 20px;
            width: 100%;
            font-size: 14px;
        }
        .file input {
            position: absolute;
            font-size: 100px;
            right: 0;
            top: 0;
            opacity: 0;
        }
        .file:hover {
            background: #AADFFD;
            border-color: #78C3F3;
            color: #004974;
            text-decoration: none;
        }
        .imgview {
            img {
                width: 100%;
                height: 100%;
            }
            div {
                width: 2rem; // height: 2rem;
            }
        }
        .tips {
            color: orangered;
        }
    }
</style>